<template>
  <div>
    <el-row style="background-color: #2d3d58">
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="color:#33d812">XX教育后台管理系统</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">&nbsp;</div></el-col
      >
      <el-col :span="6">
        <div class="grid-content bg-purple" style="color: #fff">
          {{ currentDateTime }}&nbsp;{{ week }}
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#2d3d58"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="2">
              <template slot="title">
                <el-avatar :size="35" :src="staffInfo.avatar"></el-avatar
                >&nbsp;&nbsp;&nbsp;&nbsp;{{ staffInfo.userName }}
              </template>
              <el-menu-item index="2-1" type="text" @click="open"
                >个人中心</el-menu-item
              >
              <el-menu-item index="2-2" @click="changePass"
                >修改密码</el-menu-item
              >
              <el-menu-item @click="logout" index="2-3">退出</el-menu-item>
            </el-submenu>
            <el-menu-item index="4"
              ><a href="https://www.baidu.com" target="_blank"
                >百度首页</a
              ></el-menu-item
            >
          </el-menu>
        </div></el-col
      >
    </el-row>

    <el-row>
      <el-dialog :title="title" :visible.sync="passFormVisible">
        <!-- :rules="rules" -->
        <el-form
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="原始密码" prop="passold">
            <el-input
              type="password"
              autocomplete="off"
              v-model="form.passold"
              @blur="checkOldPassword('form')"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新的密码" prop="pass">
            <el-input
              type="password"
              v-model="form.pass"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="form.checkPass"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="(passFormVisible = false), clearValidate('form')"
              >取 消</el-button
            >

            <el-button @click="resetForm('form')" type="info">重置</el-button>
            <el-button
              type="primary"
              @click="submitForm('form')"
              :disabled="btnStatus"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-row>

    <el-row>
      <!--个人信息弹出框-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-header>个人中心</el-header>
        <span style="font-weight: bold; font-size: 20px; text-align: center"
          >基本资料:</span
        >
        <el-form style="padding: 30px">
          <el-form-item label="用户账号:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.loginName" :disabled="inputStatus"></el-input>
          </el-form-item>
          <el-form-item label="用户名:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.userName" :disabled="inputStatus"></el-input>
          </el-form-item>
          <el-form-item label="用户性别:"  :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.sex" :disabled="inputStatus" ></el-input>
          </el-form-item>
          <el-form-item label="用户手机号:" :label-width="formLabelWidth">
            <el-input
              show-word-limit
              v-model="staffInfo.phonenumber"
              :disabled="inputStatus"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.email" :disabled="inputStatus"></el-input>
          </el-form-item>
          <el-form-item label="所属部门:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="optionsA.deptName" :disabled="inputStatus"></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else if (
        this.form.passold == this.form.pass ||
        value === this.form.passold
      ) {
        callback(new Error("不能和原密码一致!"));
      } else {
        callback();
      }
    };
    return {
      inputStatus:true,
      optionsA: {},
      formLabelWidth: "120px",
      dialogFormVisible: false,
      btnStatus: false,
      passFormVisible: false,
      //头部导航相关属性
      currentDateTime: "", //获取当前时间
      week: "", //星期几
      activeIndex2: "1", //导航栏默认激活
      staffInfo: {}, //登录人信息对象
      title: "",
      form: { passold: "", pass: "", checkPass: "" },
      // 表单校验
      rules: {
        passold: [{ message: "", trigger: "blur" }],
        pass: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12个字符", trigger: "blur" },
        ],
        checkPass: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
      },
    };
  },
  created: function () {
    //获取用户登录后的信息
    var _this = this;
    this.$http.get("/user/queryByUserName?userName="+localStorage.getItem("userName")).then(function (response) {
      //alert(JSON.stringify(response));
      if (response.data.code == 200) {
        _this.staffInfo = response.data.data;
      }
    });

    // 调用两个方法，给头部导航栏gettime和week赋值
    this.currentTime();
    this.getWeek();
  },
  methods: {
    //头部导航获取当前时间
    getTime: function () {
      //获取当前时间
      let currentDate = new Date();
      //获取到4位的年 2022
      let yy = currentDate.getFullYear();
      let mm = currentDate.getMonth() + 1;
      let dd = currentDate.getDate();
      let hh = currentDate.getHours();
      //currentDate.getMinutes()<10    0-9   ->  00 - 09
      let mf =
        currentDate.getMinutes() < 10
          ? "0" + currentDate.getMinutes()
          : currentDate.getMinutes();
      let ss =
        currentDate.getSeconds() < 10
          ? "0" + currentDate.getSeconds()
          : currentDate.getSeconds();
      this.currentDateTime =
        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    //每隔0.5秒调用getTime属性
    currentTime() {
      //setInterval(param1,param2)  每个param2间隔时间调回用方法param1
      setInterval(this.getTime, 500);
    },
    //获取星期几
    getWeek() {
      //java String   "abc".charAt(1)  返回某一个字符串"abc"1位置上的字符
      //.getDay() 获取星期几的数字 0-6    周日是第1天
      //.getDate() 获取档期日期的每月第几天   2020-03-12  12
      console.log("星期" + new Date().getDay());
      //charAt 返回指定字符串位置上的值  "abcdef".charAt(0) = a     "abcdef".charAt(2) = c
      this.week = "星期" + "日一二三四五六".charAt(new Date().getDay());
    },
    //用户退出
    logout() {
      //清除token
      localStorage.removeItem("token");
      //跳转到首页
      this.$router.push("/Login");
    },
    open() {
      console.log(JSON.stringify(this.staffInfo));
      var _this = this;
      //获取部门信息
      this.$http
        .get("/dept/queryById?id=" + _this.staffInfo.deptId)
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.optionsA = response.data.data;
          }
        })
        .catch(function (error) {
          //错误的处理
          // handle error
          console.log(error);
        })
        .then(function () {
          //总执行 最终处理      类似java  异常处理的finally
          // always executed
        });
      this.dialogFormVisible = true;

      if (this.staffInfo.sex==0) {
        this.staffInfo.sex = "男";
      } else if (this.staffInfo.sex==1){
        this.staffInfo.sex = "女";
      } else {
        this.staffInfo.sex = "未知";
      }
      //指定对话框标题
      this.title = "个人信息";
    },
    changePass() {
      this.passFormVisible = true;
      //指定对话框标题
      this.title = "修改密码";
    },
    resetForm(form) {
      this.clearValidate("form");
      this.form = {};
    },
    checkOldPassword(form) {
      //获取用户登录后的信息

      var _this = this;
      this.$http
        .get("/user/queryByPassword?password=" + _this.form.passold)
        .then(function (response) {
          //alert(JSON.stringify(response));
          if (response.data.code != 200) {
            _this.$message.error("请输入正确的密码");
            //_this.rules.passold[0].message = "请输入正确的密码";
            _this.btnStatus = true;
          }else{
            _this.btnStatus =false;
          }
        });
      //alert(11111);
      //alert(JSON.stringify(this.form));
    },
    clearValidate(formName) {
      this.$refs[formName].clearValidate();
    },
    submitForm(form) {
      var _this = this;
      this.$http
        .put("/user/alterPassword?pass=" + this.form.pass)
        .then(function (response) {
          //alert(JSON.stringify(_this.form.pass))
          //alert(JSON.stringify(response));
          if (
            response.data.code == 200 &&
            _this.form.pass == _this.form.checkPass &&
            _this.form.pass != _this.form.passold
          ) {
            // //提示修改成功
            _this.$message({
              message: "恭喜你，这是一条成功消息",
              type: "success",
              
            });
            // //重新加载数据
            // _this.passFormVisible = false;
            // _this.form = {};
            _this.$router.push("/Login");
          }
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* sdfsdfsdfsdfsdfsadfsdfsdf */
</style>
